<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta http-equiv="Cache-Control" content="private">
		<meta content="telephone=no,email=no" name="format-detection">
		<meta content="yes" name="apple-mobile-web-app-capable">
		<meta http-equiv="Access-Control-Allow-Origin" content="*" />
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
		<title>位置</title>
		
		<link rel="stylesheet" href="./css/map/demo-center.css"/>
		<link rel="stylesheet" href="./css/bootstrap/css/bootstrap.css">
		<script src="./js/lib/rem.js"></script>
		<script src="./js/lib/jquery-3.3.1.min.js"></script>
		<script src="./js/lib/common.js"></script>
		<link rel="stylesheet" href="./css/common/style.css">
		
	</head>
	<style>
		.location{width:100%;height:100%;background:#f2f2f2;position:fixed;}
		.location-title{width:100%;height:1rem;line-height:1rem;text-align:center;background:#0c5dac;}
		.location-title > span{font-size:0.34rem;color:#fff;}
		
		.location-map{width:100%;height:calc(100% - 2rem);}
		.location-map > div{width:100%;height:100%;}

		.f{width:100%;height:1rem;position:fixed;left:0;bottom:0;background:#fff;display:flex;flex-direction:row;align-items:center;}
		.f > a{height:1rem;margin:0 3%;text-decoration:none;flex:1;display:flex;flex-direction:column;justify-content:center;align-items:center;}
		.f > a > span{font-size:0.26rem;color:#636363;}
		.f > a > i{width:0.4rem;height:0.4rem;}
		.f > a > i.index{background:url('./img/icons/index.png') no-repeat;background-size:0.4rem 0.4rem;}
		.f > a > i.config{background:url('./img/icons/setup.png') no-repeat;background-size:0.4rem 0.4rem;}
		.f > a > i.position{background:url('./img/icons/position.png') no-repeat;background-size:0.4rem 0.4rem;}
		.f > a > i.mine{background:url('./img/icons/mine.png') no-repeat;background-size:0.4rem 0.4rem;}
		.position-active{background:url('./img/icons/position-active.png') no-repeat;background-size:0.4rem 0.4rem;}
		.active-s{color:#0c5dac !important;}
		
		
		.amap-icon img,.amap-marker-content img{width: 25px;height: 34px;}
        .marker {position: absolute;top: -20px;right: -118px;color: #fff;padding: 4px 10px;box-shadow: 1px 1px 1px rgba(10, 10, 10, .2);white-space: nowrap;font-size: 12px;font-family: "";background-color: #25A5F7;border-radius: 3px;}
        .input-card{width: 32rem;z-index: 170;}
        .input-card .btn{margin-right: .8rem;}
        .input-card .btn:last-child{margin-right: 0;}
		
	</style>
	<body>
		<div class="location">
			<div class="location-title">
				<span>位置</span>
			</div>
			
			<div class="location-map">
				<div id="container"></div>
			</div>			
			
			<div class="f">
				<a href="./index.html"><i class="index"></i><span>首页</span></a>
				<a href="./setup.html"><i class="config"></i><span>设置</span></a>
				<a href="./position.html"><i class="position-active"></i><span class="active-s">定位</span></a>
				<a href="./person.html"><i class="mine"></i><span>我的</span></a>
			</div>
		</div>
		
		<div class="divsmallmodal" id="renewLocation">
			<div class="divsmallmodal-contain">
				<div class="divsmallmodal-content">
					<span id="showpostiontipsContent">正在重新定位</span>
				</div>
			</div>
		</div>
		
		<div id="taskdiv"></div>
		
		<!-- putforward modal -->
		<div class="infor-modal" id="inforModal">
			<div class="infor-inner">
				<div class="infor-contain">
					<div class="informodal-title">
						<div class="modal-title">
							<span>试玩助手</span>
						</div>
					</div>
					<div class="inforModal-content">
						<span id="inforContextTitle"></span>
						<span id="inforContext"></span>
					</div>
				</div>
			</div>
		</div>
		
		<script src="./js/sendtask.js?v=1043"></script>
		<script type="text/javascript" src="./js/lib/map/maps.js"></script>
		<script src="./js/lib/mui/mui.min.js"></script>

		<script type="text/javascript">
			var taskstate = localStorage.getItem('taskstate');
			if(taskstate === "true"){
				//after five minutes send task start
				setTimeSendTaskStart();
			}
			
			//show position tips 
			showPosTips();
			
			//show position tips 
			function showPosTips(){
				$('#showpostiontipsContent').text('正在重新虚拟定位');
				$('#renewLocation').fadeIn(500);
				
				var n = 0;
				var showpostimer = setInterval(function(){
					n++;
					if(n === 3){
						$('#renewLocation').fadeOut(500);
					}else if(n === 4){
						$('#showpostiontipsContent').text('重新虚拟定位成功');
						$('#renewLocation').fadeIn(500);
					}else if(n === 7){
						$('#renewLocation').fadeOut(500);
						n = 0;
						clearInterval(showpostimer);
					}
				},1000);
			}
			
			//初始化地图
			var jdXmin = 84.022152;
			var jdXmax = 121.626226;
			var wdYmax = 41.356937;
			var wdYmin = 30.624202;
			var longt = Math.random()*(jdXmax-jdXmin+1)+jdXmin;
			var lat = Math.random()*(wdYmax-wdYmin+1)+wdYmin;
			setTimeout(function(){
				addMarker(longt,lat);
			},3000);
			
			var marker,map = new AMap.Map('container', {
			  resizeEnable: true, //是否监控地图容器尺寸变化
			  zoom: 5, //初始地图级别
			  center: [longt, lat], //初始地图中心点
			});
			
		   map.on( 'click',  function (e) {
				clearMarker();
				lnglatInput = e.lnglat.toString();
				var inputVal = lnglatInput.split(',');
				var x = inputVal[0];
				var y = inputVal[1];
				addMarker(x,y);
			});
			// 实例化点标记
			function addMarker(x,y) {
				marker = new AMap.Marker({
					icon: "./img/icons/poi-marker-default.png",
					position: [x,y],
					offset: new AMap.Pixel(-13, -30)
				});
				marker.setMap(map);
			}

			 // 清除 marker
			function clearMarker() {

				if (marker) {
					marker.setMap(null);
					marker = null;
				}
			}
			
			
		</script>
	</body>
</html>

